<template>
  <div class="info">
    <!-- 顶栏 -->
    <div class="top">
      <ul class="nav">
        <li>
          红魔
          <div class="header-content">
            <div class="tab">
              <ul class="tab-control"></ul>
              <div class="tab-card">
                <div class="tab-content show">
                  <div class="shop">
                    <img class="shop-img" src="/img/phone1.png" alt="" />
                    <h2>红魔8Pro+</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone2.png" alt="" />
                    <h2>红魔8Pro</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone3.png" alt="" />
                    <h2>红魔7S Pro</h2>
                    <h3></h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone4.png" alt="" />
                    <h2>红魔7S</h2>
                    <h3></h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          努比亚
          <div class="header-content">
            <div class="tab">
              <ul class="tab-control"></ul>
              <div class="tab-card">
                <div class="tab-content show">
                  <div class="shop">
                    <img class="shop-img" src="/img/phone5.png" alt="" />
                    <h2>nubia Z50</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/phone6.png" alt="" />
                    <h2>nubia Z30Pro</h2>
                    <h3></h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <span @mouseenter="flagIndex = 1">智能生态</span>
          <div class="header-content">
            <div class="tab">
              <ul class="tab-control">
                <li @mouseenter="flagIndex = 1">新品</li>
                <li @mouseenter="flagIndex = 2">电竞设备</li>
                <li @mouseenter="flagIndex = 3">手机充电</li>
                <li @mouseenter="flagIndex = 4">智能穿戴</li>
                <li @mouseenter="flagIndex = 5">手机壳膜</li>
              </ul>
              <div class="tab-card toggle-flag">
                <div class="tab-content show" v-show="flagIndex == 1">
                  <div class="shop">
                    <img class="shop-img" src="/img/new1.png" alt="" />
                    <h2>中兴Z4 pro 4K机顶盒</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/new2.png" alt="" />
                    <h2>红魔影刃手柄</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/new3.png" alt="" />
                    <h2>红魔游戏键盘</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/new4.png" alt="" />
                    <h2>红魔鼠标垫</h2>
                    <h3>新品</h3>
                  </div>
                  <!-- <div class="more-info">查看更多</div> -->
                </div>
                <div class="tab-content show" v-show="flagIndex == 2">
                  <div class="shop">
                    <img class="shop-img" src="/img/dj1.png" alt="" />
                    <h2>红魔影刃手柄</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/dj2.png" alt="" />
                    <h2>红魔游戏键盘</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/dj3.png" alt="" />
                    <h2>红魔鼠标垫</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/dj4.png" alt="" />
                    <h2>红魔电竞显示屏</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
                <div class="tab-content show" v-show="flagIndex == 3">
                  <div class="shop">
                    <img class="shop-img" src="/img/sj1.png" alt="" />
                    <h2>C to L MFI 大白硅胶数据线</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/sj2.png" alt="" />
                    <h2>大白20W单口充电器</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/sj3.png" alt="" />
                    <h2>100W四口Gan3 Pro套装</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/sj4.png" alt="" />
                    <h2>65W三口Gan3 Pro套装</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
                <div class="tab-content show" v-show="flagIndex == 4">
                  <div class="shop">
                    <img class="shop-img" src="/img/zn1.png" alt="" />
                    <h2>努比亚新音C1蓝牙耳机</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/zn2.png" alt="" />
                    <h2>红魔手表-活力版</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/zn3.png" alt="" />
                    <h2>努比亚真无线蓝牙耳机T1</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/zn4.png" alt="" />
                    <h2>红魔手表</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="more-info">查看更多</div>
                </div>
                <div class="tab-content show" v-show="flagIndex == 5">
                  <div class="shop">
                    <img class="shop-img" src="/img/km1.png" alt="" />
                    <h2>红魔8Pro电竞导热保护壳</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/km2.png" alt="" />
                    <h2>红魔8系电竞钢化膜</h2>
                    <h3>新品</h3>
                  </div>
                  <div class="shop">
                    <img class="shop-img" src="/img/km3.png" alt="" />
                    <h2>红魔7S电竞导热保护壳</h2>
                    <h3></h3>
                  </div>
                  <!-- <div class="more-info">查看更多</div> -->
                </div>
              </div>
            </div>
          </div>
        </li>
        <li><h1 class="logo"></h1></li>
        <li>服务</li>
        <li>品牌</li>
        <li>社区</li>
      </ul>
      <ul class="user-block">
        <li>
          <a href="javascript:void(0) "><i class="user"></i></a>
          <div class="toggle-user">
            <ul>
              <li class="border-line" v-if="!iflag">
                <!-- <a class="login" href="#/Login">立即登录</a> -->
                <router-link class="login" to="/Login">立即登录</router-link>
                <span class="reg-des"
                  >无账号？<a class="register" href="#/Register"
                    >立即注册</a
                  ></span
                >
              </li>
              <li class="border-line" v-else>
                <a class="unlogin" href="javascript:void(0)" @click="quituser"
                  >退出登录</a
                >
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0) ">个人中心</a>
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0) ">我的订单</a>
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0) ">我的优惠券</a>
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0) ">我的收藏</a>
              </li>
              <li class="common-li border-line">
                <a href="javascript:void(0) ">我的预约</a>
              </li>
              <li class="common-li">
                <a href="javascript:void(0) ">收获地址</a>
              </li>
            </ul>
          </div>
        </li>
        <li @click="carFn">
          <a class="car-car" href="javascript:void(0)"
            ><i class="shop-car"></i
          ></a>
        </li>
        <li>
          <a href="javascript:void(0) "><i class="search"></i></a>
        </li>
      </ul>
    </div>

    <!-- 内容块 -->
    <div class="contents main">
      <!-- 顶部栏：首页/商品 -->
      <div class="cont-nav">
        <a href="#/home">首页</a>
        &nbsp;/&nbsp;<span>{{ shopdata['shop-name'] }}</span>
      </div>
      <!-- 商品展示 -->
      <div class="shop-show">
        <div class="left">
          <!-- 放大镜插件 -->
          <image-zoomer :src="'/img' + showimg"></image-zoomer>
          <!-- <img class="show-img" :src="'/img' + showimg" alt="" /> -->
          <ul class="shop-img-list">
            <li>
              <img
                class="small-img img-active"
                :src="'/img' + showimg"
                alt=""
              />
            </li>
            <!-- <li><img class="small-img" src="/img/typeC.png" alt=""></li>
                    <li><img class="small-img" src="/img/typeC.png" alt=""></li> -->
          </ul>
          <img class="share-img" src="/img/share.png" alt="" />
        </div>
        <div class="right">
          <h3 class="title">{{ shopdata['shop-name'] }}</h3>
          <p class="price">
            <span class="price1">￥</span
            ><span class="price2">{{ shopdata.price }}</span>
          </p>
          <div class="hd">
            <div class="right-left">
              活&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;动
            </div>
            <div class="hd-right">
              <ul class="hd-list">
                <li>
                  <span class="hd-ico">积分</span
                  ><span class="hd-text">购买即增积分，积分可抵现</span>
                </li>
                <li>
                  <span class="hd-ico">包邮</span
                  ><span class="hd-text"
                    >青铜及以下满59、白银满39、黄金及以上包邮</span
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="address">
            <div class="right-left">
              地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址
            </div>
            <div class="address-right">
              <div class="address-flex">
                <div class="address-info">
                  <img src="/img/address.png" alt="" />
                  <span class="address-safe">湖南省 永州市 宁远县</span>
                </div>
                <a class="modify fs14" href="javascript:void(0) ">修改</a>
              </div>
              <span class="has-shop fs14">现货</span>
            </div>
          </div>
          <div class="choose-color">
            <div class="right-left">选择颜色</div>
            <div class="color-right">
              <ul class="color-list">
                <li
                  class="color-chan"
                  :class="flag == index ? 'color-active' : ''"
                  @click="change(item, index)"
                  v-for="(item, index) in colorArrs"
                  :key="index"
                >
                  {{ item.color }}
                </li>
              </ul>
            </div>
          </div>
          <div class="shop-num">
            <div class="right-left pad-num">
              数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量
            </div>
            <div class="num-right">
              <span class="jian" @click="jian">
                <img
                  width="20px"
                  style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  "
                  src="/img/minus.png"
                  alt=""
                />
              </span>
              <span class="my-num">{{ number }}</span>
              <span class="jia" @click="number++">
                <img
                  width="20px"
                  style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  "
                  src="/img/add.png"
                  alt=""
                />
              </span>
            </div>
          </div>
          <div class="shop-btn">
            <a href="javascript:void(0) " class="add-in-car" @click="addcar"
              >加入购物车</a
            >
            <a href="javascript:void(0) " class="buy" @click="gongneng"
              >立即购买</a
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 商品详细信息 -->
    <img
      class="shop-info-img"
      :src="'/img' + shopdata['shop-info-img']"
      alt=""
    />

    <!-- 底栏区域 -->
    <div class="foot">
      <div class="foot-con main">
        <img src="/img/foot.png" alt="" />
        <div class="foot-line2">
          <div class="dl-block">
            <dl>
              <dt>关于我们</dt>
              <dd>关于红魔</dd>
              <dd>联系我们</dd>
              <dd>加入我们</dd>
              <dd>商家入驻</dd>
              <dd>合作招商</dd>
            </dl>
            <dl>
              <dt>手机</dt>
              <dd>红魔8Pro+</dd>
              <dd>红魔8Pro</dd>
              <dd>红魔7S Pro</dd>
              <dd>红魔7S</dd>
              <dd>红魔7Pro</dd>
              <dd>红魔7</dd>
              <dd>红魔6R</dd>
              <dd>红魔6</dd>
            </dl>
            <dl>
              <dt>配件</dt>
              <dd>手机充电</dd>
              <dd>电竞配件</dd>
              <dd>智能穿戴</dd>
              <dd>手机壳膜</dd>
            </dl>
            <dl>
              <dt>热门活动</dt>
              <dd>必购码通道</dd>
              <dd>以旧换新</dd>
              <dd>全民分销</dd>
            </dl>
            <dl>
              <dt>服务支持</dt>
              <dd>售后服务</dd>
              <dd>售后网点</dd>
              <dd>软件下载</dd>
              <dd>产品安全</dd>
              <dd>云服务</dd>
              <dd>红魔投屏</dd>
              <dd>红魔云驱动</dd>
              <dd>售后隐私政策</dd>
            </dl>
          </div>
          <img src="/img/tl.png" alt="" />
        </div>
        <img src="/img/foot-2.png" alt="" />
      </div>
    </div>
    <div class="tip-login" v-show="tip_flag">
      <a class="xx" href="javascript:void(0)" @click="tip_flag = false">x</a
      ><span class="tip-message">{{ tipMessage }}</span>
    </div>
    <el-backtop :bottom="140" :visibility-height="600"></el-backtop>
  </div>
</template>

<script>
import ImageZoomer from 'ht-image-zoomer'
import { getshop } from '../api/shop'
import { addshop } from '../api/car'
export default {
  components: { ImageZoomer },
  methods: {
    change(item, index) {
      this.flag = index
      this.showimg = item.img
    },
    quituser() {
      document.cookie = `id=undefined;path =/;`
      this.iflag = 0
      this.tipMessage = '退出账号成功！'
      this.tip_flag = true
      setTimeout(() => {
        this.tip_flag = false
      }, 2000)
    },
    //判断是否登录购物车
    carFn() {
      if (this.iflag == 0) {
        this.tipMessage = '请先登录账号！！！'
        this.tip_flag = true
        setTimeout(() => {
          this.tip_flag = false
        }, 2000)
      } else if (this.iflag == 1) {
        this.$router.push('/Car')
      }
    },
    jian() {
      if (this.number <= 1) {
        this.number = 1
      } else {
        this.number--
      }
    },
    addcar() {
      if (this.iflag == 0) {
        this.tipMessage = '请先登录账号！！！'
        this.tip_flag = true
        setTimeout(() => {
          this.tip_flag = false
        }, 2000)
      } else if (this.iflag == 1) {
        let shop = {
          id: this.userid,
          img: this.showimg,
          name: this.shopdata['shop-name'],
          num: this.number,
          price: this.shopdata.price,
          shopColor: this.colorArrs[this.flag].color,
          shopId: this.shopdata.id
        }
        console.log('post请求传送的数据', shop)
        addshop(shop)
        this.tipMessage = '加入购物车成功！'
        this.tip_flag = true
        setTimeout(() => {
          this.tip_flag = false
        }, 1000)
      }
    },
    gongneng() {
      this.tipMessage = '功能未开发...'
      this.tip_flag = true
      setTimeout(() => {
        this.tip_flag = false
      }, 1000)
    }
  },
  data() {
    return {
      //头部
      flagIndex: 0,
      iflag: 0,
      flag: 0,
      //提示框
      tipMessage: '',
      tip_flag: false,
      shopdata: { colors: '', 'color-imgs': '' },
      showimg: '',
      //car
      number: 1,
      userid: ''
    }
  },
  computed: {
    colorsList() {
      let colorslist = this.shopdata.colors.split(',')
      console.log(colorslist)
      return colorslist
    },
    colorImgs() {
      let colorimgs = this.shopdata['color-imgs'].split(',')
      return colorimgs
    },
    colorArrs() {
      let colorarrs = []
      this.colorsList.forEach((v, i) => {
        this.colorImgs.forEach((v1, i1) => {
          if (i == i1) {
            colorarrs.push({ color: v, img: v1 })
          }
        })
      })
      console.log(colorarrs)
      return colorarrs
    }
  },
  async mounted() {
    console.log(this.$route.params.id)
    let {
      data: { data }
    } = await getshop(this.$route.params.id)
    // id, shopname, price, bigImg, colors, colorImgs, shopInfoImg
    console.log(data)
    this.shopdata = data
    //预设一张图片
    this.showimg = data['big-img']
    //判断是否为登录状态
    let cookies = document.cookie.split(';')
    cookies.forEach((v) => {
      if (v.split('=')[0].trim() == 'id' && v.split('=')[1] != 'undefined') {
        this.iflag = 1
        this.userid = v.split('=')[1]
      }
    })
  }
}
</script>

<style lang="less" scoped>
body {
  min-width: 1202px;
}
/* 用于底部的版心 */
.main {
  width: 1202px;
  margin: 0 auto;
}

/* 顶栏 */
.top {
  height: 60px;
  background: #fff;
  position: relative;
}
.nav {
  width: 687px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.nav > li {
  float: left;
  padding-left: 33px;
  padding-right: 33px;
  color: #333333;
  font-weight: bold;
  font-size: 15px;
}
/* .nav>li:last-child{
    margin-right: 16px;
}
.nav>li:nth-child(3),.nav>li:nth-child(4){
    margin-right: 10px;
} */
.nav > li:nth-child(4) {
  padding-right: 0px;
  padding-left: 0px;
}
.nav > li:hover {
  color: #999;
}
.nav > li > .header-content {
  position: absolute;
  background-color: #fff;
  height: 0px;
  width: 100%;
  top: 60px;
  left: 0px;
  overflow: hidden;
  z-index: 999;
  transition: height 0.25s ease-in-out;
}
.nav > li:hover .header-content {
  height: 200px;
}
.logo {
  width: 66px;
  height: 60px;
  background: url(/img/logo.png) no-repeat center/56%;
}
.tab {
  width: 1200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: left;
}
.tab-control {
  width: 68px;
  margin-left: 75px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.tab-card {
  margin-left: 9%;
}
.tab-content {
  display: flex;
  /* margin-left: 9%; */
  align-items: center;
  height: 200px;
  display: none;
}
.tab-content .shop {
  height: 152px;
}
.tab-content .shop-img {
  width: 100px;
  margin-left: 34px;
  margin-right: 34px;
}
.tab-content .shop > h2 {
  font-size: 12px;
  font-weight: 500;
  color: #333333;
  margin-top: 10px;
  line-height: 1.72222;
  text-align: center;
}
.tab-content .shop > h3 {
  color: #e70012;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.72222;
}
.tab-content .more-info {
  width: 100px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #ea340d;
  color: #ea340d;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  transition: all 0.25s;
}
.tab-content .more-info:hover {
  background-color: #ea340d;
  color: #fff;
}

.tab-control > li {
  line-height: 35px;
  height: 35px;
  text-align: center;
  color: #333333;
  font-size: 12px;
  font-weight: 400;
  transition: all 0.25s;
}
.tab-control > li:hover {
  background-color: #eee;
}

.tab-control > li:nth-child(1) {
  margin-top: 10px;
}
.tab-control > li:last-child {
  margin-bottom: 10px;
}
.show {
  display: flex;
}
.user {
  display: inline-block;
  width: 35px;
  height: 60px;
  background: url(/img/admin2.png) no-repeat center/22px 22px;
}
.shop-car {
  display: inline-block;
  width: 35px;
  height: 60px;
  background: url(/img/shop-car2.png) no-repeat center/22px 22px;
}
.search {
  width: 35px;
  height: 60px;
  display: inline-block;
  background: url(/img/search2.png) no-repeat center/22px 22px;
}
.user-block {
  width: 144px;
  height: 60px;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  right: 116px;
  top: 0px;
}
.toggle-user {
  position: absolute;
  top: 60px;
  right: -76px;
  background: #fff;
  width: 320px;
  height: 0px;
  padding: 0px;
  transition: 0.25s;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgb(102 102 102 / 50%);
}
.user-block > li:nth-child(1):hover .toggle-user {
  height: 376px;
  padding: 20px;
  z-index: 999;
}
.toggle-user li:nth-child(1) {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.login {
  width: 56px;
  height: 50px;
  line-height: 50px;
  color: #e8390c;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.login:hover {
  color: #333;
}
.unlogin {
  width: 56px;
  height: 50px;
  line-height: 50px;
  color: #e8390c;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.unlogin:hover {
  color: #333;
}
.login-none {
  display: none !important;
}
.reg-des {
  color: #999;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}
.register {
  color: rgb(80, 151, 223);
}
.common-li {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
}
.common-li a {
  color: #999;
}

.common-li:hover a {
  color: #333;
}
.border-line {
  border-bottom: 1px solid #eee;
}

/* 内容区 */
.cont-nav {
  height: 62px;
  line-height: 62px;
  border-bottom: 1px solid #eee;
  color: #999;
  font-size: 14px;
  margin-bottom: 70px;
  font-family: 'Noto Sans SC', Helvetica, Arial, sans-serif;
}
.cont-nav > a {
  color: #333;
  font-weight: 500;
  line-height: 21px;
}
/* 商品展示 */
.shop-show {
  display: flex;
}
.shop-show .left > .show-img {
  width: 540px;
  height: 540px;
}
.shop-img-list {
  display: flex;
  width: 100%;
  justify-content: center;
}
.shop-show .left .small-img {
  width: 84px;
  height: 84px;
  margin: 1px 5px 22px 5px;
}
.img-active {
  border: 1px solid #de634f;
}
.shop-show .left > .share-img {
  height: 30px;
  margin-left: 110px;
}
/* 右侧 */
.right {
  margin-left: 55px;
}
.right .title {
  font-size: 24px;
  font-family: 'Noto Sans SC', Helvetica, Arial, sans-serif;
  line-height: 41px;
}
.right .price {
  height: 50px;
  width: 600px;
  border-bottom: 1px solid #eee;
  margin-top: 5px;
}
.right .price1 {
  font-size: 14px;
}
.right .price2 {
  font-size: 24px;
  margin-top: 5px;
}
.right .hd {
  height: 86px;
  padding-top: 38px;
  display: flex;
  border-bottom: 1px solid #eee;
}
.hd-right {
  margin-left: 40px;
}
.hd-right .hd-ico {
  display: inline-block;
  width: 50px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  color: #de634f;
  border: 1px solid #de634f;
  border-radius: 4px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.hd-right .hd-text {
  font-size: 15px;
  color: #1e1e1e;
  font-family: 'Noto Sans SC', Helvetica, Arial, sans-serif;
}
.right .address-right {
  margin-left: 40px;
}
.right .address {
  height: 86px;
  padding-top: 38px;
  display: flex;
  border-bottom: 1px solid #eee;
}
.right .address-flex {
  display: flex;
  width: 460px;
  margin-bottom: 10px;
  justify-content: space-between;
}
.right .address-info > img {
  width: 12px;
  display: inline-block;
}
.address-safe {
  color: #1e1e1e;
  margin-left: 5px;
}
.modify {
  color: #ea340d;
}
.has-shop {
  color: #ea340d;
  margin-left: 20px;
}

.right-left {
  color: #666666;
  font-size: 14px;
  line-height: 20px;
  font-family: 'Noto Sans SC', Helvetica, Arial, sans-serif;
}

.choose-color {
  height: 86px;
  padding-top: 38px;
  display: flex;
}
.color-list {
  display: flex;
  flex-wrap: wrap;
}
.color-chan {
  width: 152px;
  height: 47px;
  border: 1px solid #ddd;
  margin: 0px 5px;
  border-radius: 4px;
  line-height: 47px;
  text-align: center;
  font-size: 14px;
  color: #333;
}
.color-active {
  border: 1px solid #e70012;
  color: #1e1e1e;
}
.right .color-right {
  margin-left: 40px;
}
.shop-num {
  height: 86px;
  display: flex;
}
.pad-num {
  padding-top: 15px;
}
.right .num-right {
  margin-left: 40px;
}
.num-right {
  display: flex;
}
.num-right .jian {
  width: 51px;
  height: 48px;
  border: 1px solid #ddd;
  border-right: none;
  line-height: 48px;
  text-align: center;
  position: relative;
}
.num-right .my-num {
  width: 51px;
  height: 48px;
  border: 1px solid #ddd;
  border-right: none;
  border-left: none;
  line-height: 48px;
  text-align: center;
  font-family: 'Noto Sans SC', Helvetica, Arial, sans-serif;
  color: #1e1e1e;
}
.num-right .jia {
  width: 51px;
  height: 48px;
  border: 1px solid #ddd;
  border-left: none;
  line-height: 48px;
  position: relative;
}
.shop-btn {
  margin-top: 40px;
  display: flex;
}
.add-in-car {
  margin-right: 10px;
  width: 240px;
  height: 60px;
  background-color: #eee;
  color: #333;
  border-radius: 4px;
  text-align: center;
  line-height: 60px;
}
.buy {
  margin-right: 10px;
  width: 240px;
  height: 60px;
  background-color: #de634f;
  color: white;
  border-radius: 4px;
  text-align: center;
  line-height: 60px;
}
.shop-info-img {
  width: 100%;
  margin-top: 40px;
}
/* 底栏区域 */
.foot {
  margin-top: 97px;
  width: 100%;
  height: 717px;
  background: #000000;
  color: #414143;
}
.foot-line2 {
  display: flex;
}
.dl-block {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.dl-block dt {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 20px;
}
.dl-block dd {
  font-size: 14px;
  margin-top: 11px;
  line-height: 21px;
  color: #a5a5a5;
}
.dl-block dd:hover {
  color: #fff;
}
/* 提示框 */
.tip-login {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #e8380d;
  // width: 200px;
  padding: 0 60px;
  height: 120px;
  text-align: center;
  line-height: 120px;
  transform: translate(-50%, -50%);
  z-index: 999;
  // border: 1px solid #333;
  border-radius: 10px;
  font-size: 24px;
  color: white;
}
.xx {
  position: absolute;
  right: 3px;
  top: 3px;
  line-height: 10px;
}
.none {
  display: none;
}
/deep/.el-backtop {
  width: 100px;
  height: 100px;
  font-size: 68px;
  border-radius: 0%;
}
</style>
